<template>
  <div class="operationBtn">
    <el-button
      v-for="item of shelvesBtn"
      :key="item.val"
      class="shelvesBtn"
      type="primary"
      size="small"
      @click="goodShelves(item.val)"
    >{{ item.btnTitle }}</el-button>
  </div>
</template>

<script>
export default {
  name: 'GoodsState',
  props: {
    goodsSelection: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      shelvesBtn: [
        { val: '1', btnTitle: '上架' },
        { val: '2', btnTitle: '下架' }
      ],
      selection: []
    }
  },
  watch: {
    goodsSelection(val) {
      this.selection = val
    }
  },
  methods: {
    goodShelves(val) {
      if (val === '1') {
        console.log(this.selection.length)
        if (this.selection.length === 0) {
          this.$message.error('请选择上架商品')
        }
      } else {
        console.log('下架')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .operationBtn
    padding 20px 0 0 20px
    .shelvesBtn
      margin-right 20px
</style>
